<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .move{
            animation: moveUp 5s 3s;
            animation-direction: unset;
        }
        @keyframes moveUp {
            from{
                transform:translateY(0px);
            }
            to{
                transform:translateY(500px);
            }
        }
    </style>
</head>
<body>
    <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
        <div style="width:100px;height:100px;position:relative;">
            
            <div style="width:100px;height:200px;border: 1px soild black;background-color: blue;" id="wai">
                <div style="width:50px;height:60px; background-color:aquamarine" id="nei"></div>
            </div>
        </div>
    </div>
    <script>
        const dianji1=(e)=>{
            console.log(e,"外层div");
        }
        const dianji2=(e)=>{
            e.stopPropagation();
            console.log(e,"内层div");
        }
        const wai = document.getElementById("wai")
        const nei = document.getElementById("nei")
        wai.onclick = dianji1
        nei.onclick = dianji2
    </script>
</body>
</html>
